<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box{
        width: 910px;
        height: 250px;
        margin: auto;
    }
    table {
        border: 1px solid red;
        border-collapse: collapse;
        margin-top: 20px;
    }

    tr,
    th,
    td {
        border: 1px solid red;
        width: 150px;
        height: 40px;
        text-align: center;
    }
    table tr:hover{
        background: orange;
    }
    tr:nth-child(even) {
        background: yellow;
    }

    tr:nth-child(odd) {
        background: pink;
    }
</style>

<body>
    <!-- 输入姓名，性别和年龄 -->
    <div class="box">
        <input type="text" placeholder="名" id="ming">
    <select name="" id="xing">
        <option data="" type="">请选择性别</option>
        <option data="" type="">男</option>
        <option data="" type="">女</option>
    </select>
        <input type="text" placeholder="年龄" id="nian">
        <button id="buttj">提交</button>

        <br>

        <!-- 排序 -->
        <select name="" id="" style="margin-top: 20px;">
            <option value="">选择一个排序字段</option>
            <option value="">编号</option>
            <option value="">年龄</option>
        </select>
        <select name="" id="">
            <option value="">选择一个排序方式</option>
            <option value="">升序</option>
            <option value="">降序</option>
        </select>
        <button id="px">排序</button>
    
    <div id="box"></div>
    <!-- 表格 -->
    <table>
        <tr style="background: #fff;">
            <th>全选<input type="checkbox" id="quanxuan"></th>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox" name="a"></td>
                <td>1</td>
                <td>小明</td>
                <td>男</td>
                <td>11</td>
                <td>
                    <button>上移</button>
                    <button>下移</button>
                    <button>删除</button>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" name="a"></td>
                <td>2</td>
                <td>小子</td>
                <td>男</td>
                <td>13</td>
                <td>
                    <button>上移</button>
                    <button>下移</button>
                    <button>删除</button>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" name="a"></td>
                <td>3</td>
                <td>小红</td>
                <td>女</td>
                <td>12</td>
                <td>
                    <button>上移</button>
                    <button>下移</button>
                    <button>删除</button>
                </td>
            </tr>
        </tbody>
        
    </table>
    </div>
    

</body>
<script>
    window.onload = function () {
        // var btn = '<input sype="checkbox" name="a">'
        // // var arr = ['全选','编号','姓名','年龄','性别','操作']
        
        // var lis = '<table>'
        //     lis += `<tr>`
        //     for (var i = 0; i < arr1.length; i++) {
        //         lis += `<th>${arr[i]}</th>`
        //     }
        //     lis += `</tr>`

        //     lis += '</table>'
            
        //     box.innerHTML = lis



        // 提交
        document.getElementById('buttj')



        // 全选
        var qx = document.getElementsByName('a')

        document.getElementById('quanxuan').addEventListener('change', function () {
            for (let i = 0; i < qx.length; i++) {
                qx[i].checked = this.checked
            }
            
        })

        for (let j = 0; j < qx.length; j++) {
            qx[j].addEventListener('change', function () {
                var flag = true
                for (let l = 0; l < qx.length; l++) {
                    if (!qx[l].checked) {
                        flag = false
                    }
                }
                document.getElementById('quanxuan').checked = flag
            })
        }


    }
</script>

</html>